import { FC } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import Head from 'next/head'
import PageLayout from '@/components/layouts/PageLayout'
import { useRouter } from 'next/router'

const LoginPage: FC = () => {
  const router = useRouter()
  
  const onFinish = (values: any) => {
    console.log('表单值：', values)
    // 处理登录逻辑
  }

  return (
    <>
      <Head>
        <title>登录 - 移动端应用</title>
      </Head>
      <PageLayout title="登录" showTab={false} onBack={() => router.back()}>
        <div className="login-page">
          <Form
            layout='vertical'
            onFinish={onFinish}
            footer={
              <Button block type='submit' color='primary' size='large'>
                登录
              </Button>
            }
          >
            <Form.Item
              name='username'
              label='用户名'
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
              name='password'
              label='密码'
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input type='password' placeholder='请输入密码' />
            </Form.Item>
          </Form>

          <div className="actions">
            <Button
              fill='none'
              onClick={() => router.push('/register')}
            >
              注册账号
            </Button>
            <Button
              fill='none'
              onClick={() => router.push('/forgot-password')}
            >
              忘记密码
            </Button>
          </div>
        </div>

        <style jsx>{`
          .login-page {
            padding: 20px;
          }
          .actions {
            margin-top: 24px;
            display: flex;
            justify-content: space-between;
          }
        `}</style>
      </PageLayout>
    </>
  )
}

export default LoginPage